<template>
    <div class="fluid">
        <div class="container">
            <p>为您提供最实效的案例分析</p>
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <img :src="item[0]">
                    <span><span>{{item[1]}}</span><span>{{item[2]}}</span><span>{{item[3]}}</span>
                    </span>
                </li>
            </ul>
            <button v-show="false">立即体验</button>
            <img src="../../assets/img/精选案例/切图/6.png">
            <img src="../../assets/img/精选案例/切图/7.png">
            <img src="../../assets/img/精选案例/切图/8.png">
            <img src="../../assets/img/精选案例/切图/9.png">
            <img src="../../assets/img/精选案例/切图/10.png">
            <img src="../../assets/img/精选案例/切图/11.png">
        </div>
    </div>
</template>
<script>
const img1 = require("../../assets/img/精选案例/切图/1.png")
const img2 = require("../../assets/img/精选案例/切图/2.png")
const img3 = require("../../assets/img/精选案例/切图/3.png")
const img4 = require("../../assets/img/精选案例/切图/4.png")
// const img1 = require("../../assets/img/精选案例/切图/1.png")
export default {
    data(){
        return {
            list:[
                [img1,"服务客户","5万","+"],
                [img2,"覆盖全网","百亿","流量"],
                [img3,"创新","行业智能投放"],
                [img4,"报价低于市场","20%"]
            ]
        }
    }
}
</script>
<style scoped>
    .fluid{
        width: 100%;
        background: url("../../assets/img/精选案例/切图/5.png");
        height: 574px;
        overflow: hidden;
         position: relative;
         background-position: center;
    }
    .container{
        width:1200px;
        margin:0 auto;
        overflow: hidden;
        text-align: center;
    }
    .container>ul{
        overflow: hidden;
        width:426px;
       margin: 0 auto;
       /* margin-bottom:50px; */
    }
    .container>p{
        font-size: 36px;
        color:rgb(34, 34, 34);
        margin-top: 48px;
        text-align: center;
    }
    .container>ul>li{
        float:left;
        overflow: hidden;
        width: 213px;
        text-align: left;
    }
    .container>ul>li:nth-child(1),.container>ul>li:nth-child(2){
        margin-top: 30px;
    }
    .container>ul>li:nth-child(3),.container>ul>li:nth-child(4){
        margin-top: 20px;
    }
    .container>ul>li>img{
        vertical-align: middle;
    }
    .container>ul>li>span{
        margin-left: 10px;
        margin-top: 5px;
    }
    .container>ul>li span{
        font-size: 16px;
        color:rgb(34, 34, 34);
    }
    .container>ul>li:nth-child(1)>span>span:nth-child(2){
        font-weight: bold;
    }
    .container>ul>li:nth-child(2)>span>span:nth-child(2){
        font-weight: bold;
    }
    .container>ul>li:nth-child(3)>span>span:nth-child(1){
        font-weight: bold;
    }
    .container>ul>li:nth-child(4)>span>span:nth-child(2){
        font-weight: bold;
    }
    .container>button{
        margin-top: 60px;
        width:124px;
        height: 42px;
        border-radius: 20px;
        background: #EE4041;
        font-size: 16px;
        color:#fff;
    }
    .container>img:nth-child(4){
        position: absolute;
        left:418px;
        bottom: 181px;
    }
    .container>img:nth-child(5){
        position: absolute;
        left:544px;
        bottom: 251px;
    }
    .container>img:nth-child(6){
        position: absolute;
        left:604px;
        bottom: 168px;
    }
    .container>img:nth-child(7){
        position: absolute;
        right:740px;
        bottom: 162px;
    }
    .container>img:nth-child(8){
        position: absolute;
        right:519px;
        top:249px;
    }
    .container>img:nth-child(9){
        position: absolute;
        right:445px;
        top:202px;
    }
</style>


